<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--</head>-->
<!--<style>-->
<!--    .about{-->
<!--        font-weight: bold;-->
<!--        color: orange;-->
<!--        text-shadow:0 0 10px orange;-->
<!--        font-size: 30px;-->
<!--        /*text-align: center;*/-->
<!--        font-family: "楷体";-->
<!--    }-->
<!--    .about1{-->
<!--        font-weight: bold;-->
<!--        color: orange;-->
<!--        text-shadow:0 0 10px orange;-->
<!--        font-size: 30px;-->
<!--        /*text-align: center;*/-->
<!--        font-family: "楷体";-->
<!--        margin-left: 100px;-->
<!--    }-->
<!--    .p{-->
<!--        margin-left: 50px;-->
<!--        font-family: "华文宋体";-->
<!--        font-weight: bold;-->
<!--    }-->
<!--</style>-->
<!--<body>-->
<!--     <a class="about">助农丰年，智慧农田——</a>-->
<!--     <br><a class="about1">基于物联网技术的污染农田管控云服务</a>-->
<!--     <br><a class="p">(助农丰年，智慧农田——基于物联网技术的污染农田管控云服务)</a>-->
<!--</body>-->
<!--</html>-->

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <style>-->
<!--        .name{-->
<!--            box-shadow: 0 0 15px lightblue;-->
<!--            margin-left: 100px;-->
<!--            margin-bottom: 20px;-->
<!--            width: 70%;-->

<!--        }-->
<!--        .p1{-->
<!--            margin-top: 200px;-->
<!--            text-align: center;-->
<!--            font-family: "楷体";-->
<!--            box-shadow: 0 0 15px black;-->
<!--            font-weight: bold;-->
<!--            font-size: 20px;-->


<!--        }-->
<!--        .p2{-->
<!--            text-align: center;-->
<!--            width: 5%;-->
<!--            display: inline-block;-->
<!--            margin-left: 50px;-->
<!--            height:10%;-->
<!--            text-shadow: 0 0 5px blue;-->
<!--            font-size: 20px;-->
<!--            box-shadow: 0 0 10px gray;-->
<!--            margin-top: 10px;-->
<!--            margin-bottom: 10px;-->
<!--            font-family: 楷体;-->
<!--            font-weight: bold;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--     <div class="name">-->
<!--         <div class="p1">功能特点</div>-->
<!--         <div class="p2">数据查看</div>-->
<!--         <div class="p2">智能工控</div>-->
<!--         <div class="p2">异常报警功能</div>-->
<!--         <div class="p2">人员管理功能</div>-->
<!--         <div class="p2">分析报表功能</div>-->
<!--     </div>-->
<!--</body>-->
<!--</html>-->








<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 设置整个页面的样式 */
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        /* 设置问题样式 */
        .question {
            margin-bottom: 20px;
            font-weight: bold;
            font-family: 楷体;
            font-size: 50px;
            text-shadow: 0 0 15px lightblue;

        }

        /* 设置分层描述图样式 */
        .layered-description {
            display: flex;
            align-items: center;
        }

        /* 设置层级样式 */
        .layer {
            padding: 10px;
            border: 1px solid #333;
            margin-right: 10px;
            /*width: 40%;*/
            box-shadow: 0 0 15px black;
            margin-left: 10px;
            margin-bottom: 10px;

        }
        img{
            width: 40%;
            border-radius: 20%;
            border: 3px dotted pink;
        }
        p{
            font-family: 楷体;
            font-size: 15px;
            font-weight: bold;
        }
        .container{
            box-shadow: 0 0 10px black;
        }
    </style>
</head>
<body>
<div class="container">
<div class="question">
    传统修复技术不足
</div>

<!-- 分层描述图部分 -->
<div class="layered-description">
    <div class="layer">
        <img src="钱袋.png">
        <p>治理成本较高</p>
    </div>

    <div class="layer">
        <img src="标识-高危药品B级.png">
        <p>易造成二次感染</p>
    </div>

    <div class="layer">
        <img src="印章-待处理备份%205.png">
        <p>修复效果不理想</p>
    </div>
    <div class="layer">
        <img src="钟表.png">
        <p>修复周期长</p>
    </div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能系学生获奖情况查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        #queryResult {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>智能系学生获奖情况查询</h2>
    <input type="file" @change="handleFile" accept=".csv">
    <button @click="queryTable">上传CSV文件</button>

    <h3>CSV数据</h3>
    <table>
        <tr v-for="(row, index) in csvData" :key="index">
            <td v-for="(column, colIndex) in row" :key="colIndex">{{ column }}</td>
        </tr>
    </table>

    <h3>查询信息</h3>
    <label id="tableName">输入表名称：</label>
    <input type="text" v-model="tableName">
    <button @click="queryTable">查询</button>
    <button @click="clearQueryResult">清除查询结果</button>

    <div id="queryResult">
        <h3>查询结果</h3>
        <table v-if="queryResult.length > 0">
            <tr v-for="(row, index) in queryResult" :key="index">
                <td v-for="(column, colIndex) in row" :key="colIndex">{{ column }}</td>
            </tr>
        </table>
        <p v-else>未找到匹配的数据。</p>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            csvData: [],
            tableName: '',
            queryResult: []
        },
        methods: {
            handleFile(event) {
                const file = event.target.files[0];
                // alert(file)
                const reader = new FileReader();
                reader.onload = (e) => {
                    const binary = new Uint8Array(e.target.result);
                    const csvText = new TextDecoder("UTF-8").decode(binary);

                    // Split CSV text and parse rows
                    const rows = csvText.split(/\r\n|\n/);
                    this.csvData = rows.map(row => row.split(','));
                };

                reader.readAsArrayBuffer(file);
            },
            queryTable() {
                const lowerCaseTableName = this.tableName.toLowerCase();
                alert(this.csvData)
                this.queryResult = this.csvData.filter(row =>
                    row.some(column => column.toLowerCase().includes(lowerCaseTableName))
                );
            },
            clearQueryResult() {
                this.queryResult = [];
            }
        }
    });
</script>
</body>
</html>
